<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/default.css">	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<!-- 导入ztree类库 -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"
	type="text/css" />
<script
	src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"
	type="text/javascript"></script>	
<script type="text/javascript">
	$(function(){
		var zNodes;
		// 授权树初始化
		var setting = {
			data : {
				key : {
					title : "t"
				},
				simpleData : {
					enable : true
				}
			},
			check : {
				enable : true,
			}
		};
	
	
		
		// 先将body隐藏，再显示，不会出现页面刷新效果
		$("body").css({visibility:"visible"});
		// 数据表格属性
		$("#grid").datagrid({
			toolbar : [
				{
					id : 'add',
					text : '添加角色',
					iconCls : 'icon-add',
					handler : function(){
						location.href='${pageContext.request.contextPath}/page_admin_role_add.action';
					}
				},
				{
					id : 'edit',
					text : '角色修改',
					iconCls : 'icon-edit',
					handler : function(){
						// location.href='${pageContext.request.contextPath}/page_admin_role_add.action';
						var rows = $("#grid").datagrid("getSelections");
						if(rows!=null&&rows.length==1){
							  $("#addRoleWindow").window("open");
							   $("#roleForm").form("load",rows[0]);
							   //  发送ajax 加载树形菜单
							  $.ajax({
									url : '${pageContext.request.contextPath}/auth/functionAction_ajaxList',
									type : 'POST',
									dataType : 'text',
									success : function(data) {
										 zNodes = eval("(" + data + ")");
										 $.fn.zTree.init($("#functionTree"), setting, zNodes);
									},
									error : function(msg) {
										alert('树加载异常!');
									}
								});
						}else{
							alert("必须选一行");
						}
					}
				}
			],
			url : '${pageContext.request.contextPath}/auth/roleAction_pageQuery',
			fit : true,
			border : false,
			rownumbers : true,
			striped : true,
			pageList: [2,4,6],
			pagination : true,
			columns : [[
				{
					field : 'id',
					checkbox : true,
					title : '编号',
					width : 200
				},
				{
					field : 'name',
					title : '名称',
					width : 200
				}, 
				{
					field : 'description',
					title : '描述',
					width : 200
				}
			]]
		});
		
		$('#addRoleWindow').window({
	        title: '编辑角色',
	        width: 600,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 600,
	        resizable:false,
	    });
		
		
	
		
	});

	
</script>	
</head>
<body class="easyui-layout" style="visibility:hidden;">
	<div data-options="region:'center'">
		<table id="grid"></table>
	</div>
		<div modal="true" class="easyui-window"  style="height:400%;" title="权限修改" id="addRoleWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >提交</a>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="roleForm" method="post" action="${pageContext.request.contextPath }/auth/roleAction_save">
			  <!-- 表单提交的时候 将选择权限ids  发送后台 -->
			  <input type="hidden" name="functionIds" id="functionIds">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">角色信息</td>
					</tr>
					<tr>
						<td width="200">角色关键字</td>
						<td>
							<input type="text" name="code" class="easyui-validatebox" data-options="required:true" />						
						</td>
					</tr>
					<tr>
						<td>名称</td>
						<td><input type="text" name="name" class="easyui-validatebox" data-options="required:true" /></td>
					</tr>
					<tr>
						<td>描述</td>
						<td>
							<textarea name="description" rows="4" cols="60"></textarea>
						</td>
					</tr>
					<tr>
						<td>授权</td>
						<td>
							<ul id="functionTree" class="ztree"></ul>
						</td>
					</tr>
					</table>
			</form>
		</div>
	</div>
</body>
</html>